@charset "utf-8";
@import "reset";

@mixin title_font {
    font: 14px "宋体";
    color: #000;
}

@mixin page_font {
    font: 12px "宋体";
    color: #666;
}

@mixin box_border {
    width: 145px;
    height: 125px;
    border: 8px solid #dadfe7;
}

.job {
    width: 327px;
    ul {
        margin: 0 11px;
        li {
            float: left;
            margin: 10px 15px 7px 0;
            &:nth-child(2n) {
                margin-right: 0;
            }
            .box {
                @include box_border;
                background-image: url(../img/38.png);
                background-repeat: no-repeat;
                background-position: 95% 95%;
                .title {
                    @include title_font;
                    margin: 10px 0 0 11px;
                    line-height: 14px;
                }
                .content {
                    @include page_font;
                    margin: 10px 0 0 9px;
                    width: 72px;
                    overflow: hidden;
                    p {
                        line-height: 14px;
                        text-align: justify;
                        overflow: hidden;
                        max-height: 70px;
                        display: -webkit-box;
                        -webkit-line-clamp: 5;
                        -webkit-box-orient: vertical;
                        text-overflow: ellipsis;
                    }
                }
            }
            .job2 {
                background-image: url(../img/Layer172.png);
            }
            .job3 {
                background-image: url(../img/Layer171.png);
            }
            .job4 {
                background-image: url(../img/Layer173.png);
            }
        }
    }
}
